<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>宝宝信息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/util/utils.css">
	</head>
	<body>
		<input type="hidden" id="iptBabyId" />
		<div>
			<div style="margin-top: 10px; height: 30px; padding-top: 4px;">
				<span style="display: block; float: left; margin-left: 10px; color: #616161;">姓名</span>
				<div style="float: right; margin-right: 10px; margin-top: -4px; display: flex;">
					<span style="display: block; margin-top: 0px;">
						<input id="ipt_BabyName" style="text-align: right; padding: 0px; border: 0px; height: 22px; font-size: 14px; color: #909090;" type="text"></span>
					<span style="display: block; margin-top: 0px; margin-left: 20px;">
						<img src="../../../img/right.png" style="width: 8px;"/>
					</span>
				</div> 
			</div>
			<hr class="levline" />
			
			<div style="margin-top: 10px; height: 30px; padding-top: 4px;">
				<span style="display: block; float: left; margin-left: 10px; color: #616161;">性别</span>
				<div style="float: right; margin-right: 10px; margin-top: -4px; display: flex;">
					<span style="display: block; color: #909090;"><select id="sel_BabySex" style="font-size: 14px; padding: 0px;">
						<option value="男">男</option>
						<option value="女">女</option>
					</select></span>
					<span style="display: block; margin-top: 2px; margin-left: 20px;">
						<img src="../../../img/right.png" style="width: 8px;"/>
					</span>
				</div> 
			</div>
			<hr class="levline" />
			
			<div style="margin-top: 10px; height: 30px; padding-top: 4px;">
				<span style="display: block; float: left; margin-left: 10px; color: #616161;">生日</span>
				<div style="float: right; margin-right: 10px; margin-top: -4px; display: flex;">
					<span style="display: block;">
						<button id="btn_BabyBir" style="height: 24px; font-size: 14px; color: #909090; margin-top: -5px; text-align: right; border:0; padding-right: 0px;" data-options='{"type":"date","beginYear":1914,"endYear":2116}'>选择日期</button>
					</span>
					<span style="display: block; margin-top: 0px; margin-left: 20px;">
						<img src="../../../img/right.png" style="width: 8px;"/>
					</span>
				</div> 
			</div>
			<hr class="levline" />
			
			<div style="margin-top: 10px; height: 30px; padding-top: 4px;">
				<span style="display: block; float: left; margin-left: 10px; color: #616161;">省份</span>
				<div style="float: right; margin-right: 10px; margin-top: -4px; display: flex;">
					<span style="display: block; color: #909090; direction: rtl;">
						<select id="selProvince" style="font-size: 14px; padding: 0px; direction: rtl;">
						</select>
					</span>
					
					<span style="display: block; margin-left: 20px;">
						<img src="../../../img/right.png" style="width: 8px;"/>
					</span>
				</div> 
			</div>
			<hr class="levline" />
			
			<div style="margin-top: 10px; height: 30px; padding-top: 4px;">
				<span style="display: block; float: left; margin-left: 10px; color: #616161;">市级</span>
				<div style="float: right; margin-right: 10px; margin-top: -4px; display: flex;">
					<span style="display: block; margin-top: 0px; color: #909090; direction: rtl;">
						<select id="selCity" style="font-size: 14px; padding: 0px; direction: rtl;">
						</select>
					</span>
					
					<span style="display: block; margin-top: 0px; margin-left: 20px;">
						<img src="../../../img/right.png" style="width: 8px;"/>
					</span>
				</div> 
			</div>
			<hr class="levline" />
			
			<div style="margin-top: 10px; height: 30px; padding-top: 4px;">
				<span style="display: block; float: left; margin-left: 10px; color: #616161;">县/区</span>
				<div style="float: right; margin-right: 10px; margin-top: -4px; display: flex;">
					<span style="display: block; margin-top: 0px; color: #909090; direction: rtl;">
						<select id="selCounty" style="font-size: 14px; padding: 0px; direction: rtl;">
						</select>
					</span>
					
					<span style="display: block; margin-top: 0px; margin-left: 20px;">
						<img src="../../../img/right.png" style="width: 8px;"/>
					</span>
				</div> 
			</div>
			<hr class="levline" />
			
			<div style="margin-top: 10px; height: 30px; padding-top: 4px;">
				<span style="display: block; float: left; margin-left: 10px; color: #616161;">乡/镇</span>
				<div style="float: right; margin-right: 10px; margin-top: -4px; display: flex;">
					<span style="display: block; margin-top: 0px; color: #909090; direction: rtl;">
						<select id="selArea" style="font-size: 14px; padding: 0px; direction: rtl;">
						</select>
					</span>
					
					<span style="display: block; margin-top: 0px; margin-left: 20px;">
						<img src="../../../img/right.png" style="width: 8px;"/>
					</span>
				</div> 
			</div>
			<hr class="levline" />
			
			<div style="margin-top: 10px; height: 30px; padding-top: 4px;">
				<span style="display: block; float: left; margin-left: 10px; color: #616161;">村落</span>
				<div style="float: right; margin-right: 10px; margin-top: -4px; display: flex;">
					<span style="display: block; margin-top: 0px; color: #909090; direction: rtl;">
						<select id="selVillage" style="font-size: 14px; padding: 0px; direction: rtl;">
						</select>
					</span>
					
					<span style="display: block; margin-top: 0px; margin-left: 20px;">
						<img src="../../../img/right.png" style="width: 8px;"/>
					</span>
				</div> 
			</div>
			<hr class="levline" />
			
			<div style="margin-top: 20px; text-align: center;">
				<button id="btn_saveBaby" style="background-color: #00A8C6; width: 80%; height: 40px; font-size: 17px; color: #FFFFFF;">保存</button>
			</div>
		</div>
		
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/mui.view.js"></script>
	<script src="../../../js/mui.picker.min.js"></script>
	<script src="../../../js/utils/http.utils.js"></script>
	<script src="../../../js/bus/pubfun.js"></script>
	<script src="../../../js/jquery-1.8.3.min.js"></script>
	
	<script>
		(function($) { 
			$.init();
			
			document.getElementById("btn_BabyBir").addEventListener('tap', function() {
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				var picker = new $.DtPicker(options);
				picker.show(function(rs) {
					document.getElementById("btn_BabyBir").innerHTML = rs.text;
					picker.dispose();
				});
			}, false);
			
		})(mui);
	</script>
	
	<script>
		var $bobyNum = getQueryString(window.location.search, "baby");
		var $bobyId = getQueryString(window.location.search, "babyId");
		var $fam_info = JSON.parse(localStorage.getItem("login-user-parent"));
		var $uid = $fam_info.userId;
		
		
		window.onload = function(){
			getProvinceLst();
			loadUserInfo();
		}
		
		function loadUserInfo(){
			mui.ajax({
				url : $request_url.getUserInfo,
				headers: {
					"Authorization": $headers_authorization
				},
				type : "get",
				dataType : "json",
				data : {
					userId : $uid
				},
				success : function(dat){
					if(dat.code == 0){
						var $news_fam_info = dat.result;
						if($news_fam_info.children != null && $news_fam_info.children.length > 0){
							if($news_fam_info.children[$bobyNum] != null && $news_fam_info.children[$bobyNum] != ""){
								document.getElementById("iptBabyId").value = $news_fam_info.children[$bobyNum].id;
								document.getElementById("ipt_BabyName").value = $news_fam_info.children[$bobyNum].trueName;
								document.getElementById("sel_BabySex").value = $news_fam_info.children[$bobyNum].gender; 
								document.getElementById("btn_BabyBir").innerHTML = $news_fam_info.children[$bobyNum].birthday;
								
								document.getElementById("selProvince").value = $news_fam_info.children[$bobyNum].provinceId;
								document.getElementById("selCity").value = $news_fam_info.children[$bobyNum].cityId;
								document.getElementById("selCounty").value = $news_fam_info.children[$bobyNum].districtId;
								document.getElementById("selArea").value = $news_fam_info.children[$bobyNum].streetId;
								document.getElementById("selVillage").value = $news_fam_info.children[$bobyNum].villageId;
							}
						}
					}
				}, error : function(err){
					
				}
			});
		}
		
		document.getElementById("btn_saveBaby").addEventListener("tap", function(){
			
			var $bobyName = document.getElementById("ipt_BabyName").value;
			var $bobySex = document.getElementById("sel_BabySex").value;
			var $bobyBir = document.getElementById("btn_BabyBir").innerHTML;
			
			var $bobyProvince = document.getElementById("selProvince").value;
			var $bobyCity = document.getElementById("selCity").value;
			var $bobyCounty = document.getElementById("selCounty").value;
			var $bobyArea = document.getElementById("selArea").value;
			var $bobyVillage = document.getElementById("selVillage").value;
			
			var $bobyGrade = "0";
			var $bobySchool = "0";
			var $bobyClass = "0";
			//$bobySchool = document.getElementsByName("ipt_BabyBigSchool").value;
			//$bobyGrade = document.getElementsByName("ipt_BabyBigGrade").value;
			
			
			//$bobyClass = document.getElementById("ipt_BabyBigClass").value;
			//$bobyTea = document.getElementById("ipt_BabyBigTea").value;
			//var $bigBabyId = document.getElementById("bigBabyId").value;
			if(document.getElementById("iptBabyId").value != null && document.getElementById("iptBabyId").value != ""){
				mui.ajax({
					url : $request_url.updateChildInfo,
					headers: {
						"Authorization": $headers_authorization
					},
					type : "post",
					dataType : "json",
					data : {
						childid : document.getElementById("iptBabyId").value,
						trueName : $bobyName,
						gender : $bobySex, 
						schoolClass : $bobyClass,
						school : $bobySchool,
						birthday : $bobyBir,
						//classTeacher : $bobyTea,
						grade : $bobyGrade,
						provinceId : $bobyProvince,
						cityId : $bobyCity,
						districtId : $bobyCounty,
						streetId : $bobyArea,
						villageId : $bobyVillage
					},
					success : function(dat){
						if(dat.code == 0){
							alert("宝宝信息更新成功!");
						} else {
							mui.toast(dat.message);
						}
					}, error : function(err){
						mui.toast("服务繁忙...");
					}
				});
			} else {
				mui.ajax({
					url : $request_url.addChildInfo,
					headers: {
						"Authorization": $headers_authorization
					},
					type : "post",
					dataType : "json",
					data : {
						userId : $uid,
						trueName : $bobyName,
						gender : $bobySex,
						schoolClass : $bobyClass,
						school : $bobySchool,
						birthday : $bobyBir,
						//classTeacher : $bobyTea,
						grade : $bobyGrade,
						provinceId : $bobyProvince,
						cityId : $bobyCity,
						districtId : $bobyCounty,
						streetId : $bobyArea,
						villageId : $bobyVillage
					},
					success : function(dat){
						if(dat.code == 0){
							alert("宝宝信息添加成功!");
							document.getElementById("iptBabyId").value = dat.result;
						}
					}, error : function(err){
						
					}
				});
			}
		});
		
	</script>
	
	<script>
	
		//获取省份信息
		function getProvinceLst(){
			mui.ajax({
				url : $http_prefix + "/api/sys/provinceList",
				headers: {
					"Authorization": $headers_authorization
				},
				type : "get",
				dataType : "json",
				timeout : 1000,
				data : {
					
				},
				success : function(dat){
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							var $province = document.getElementById("selProvince");
							$province.options.length = 0;
							$province.options.add(new Option("请选择省份", "-1"));
							for(var i = 0; i < dat.result.length; i ++){
								$province.options.add(new Option(dat.result[i].name, dat.result[i].id));
							}
						}
					}
				}, error :function(err){
					
				}
			});
		}
		
		$("#selProvince").change(function(eve){
			if(this.value > 0)
			getCityLst(this.value);
		});
		
		//获取市级列表
		function getCityLst($proid){
			mui.ajax({
				url : $http_prefix + "/api/sys/cityList",
				headers: {
					"Authorization": $headers_authorization
				},
				type : "get",
				dataType : "json",
				timeout : 1000,
				data : {
					provinceId : $proid
				},
				success : function(dat){
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							var $city = document.getElementById("selCity");
							$city.options.length = 0;
							$city.options.add(new Option("请选择市级", "-1"));
							for(var i = 0; i < dat.result.length; i ++){
								$city.options.add(new Option(dat.result[i].name, dat.result[i].id));
							}
						}
					}
				}, error :function(err){
					
				}
			});
		}
		
		$("#selCity").change(function(eve){
			if(this.value > 0)
			getCountyLst(this.value);
		});
		
		
		//县/区加载
		function getCountyLst($cityId){
			mui.ajax({
				url : $http_prefix + "/api/sys/districtList",
				headers: {
					"Authorization": $headers_authorization
				},
				type : "get",
				dataType : "json",
				timeout : 1000,
				data : {
					cityId : $cityId
				},
				success : function(dat){
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							var $bigCounty = document.getElementById("selCounty");
							$bigCounty.options.length = 0;
							$bigCounty.options.add(new Option("请选择县/区", "-1"));
							for(var i = 0; i < dat.result.length; i ++){
								$bigCounty.options.add(new Option(dat.result[i].name, dat.result[i].id));
							}
						}
					}
				}, error :function(err){
					
				}
			});
		}
		
		$("#selCounty").change(function(eve){
			if(this.value > 0)
			//getSchoolLst("", "", "", this.value);
			getAreaLst(this.value);
		});
		
		
		//获取区/乡
		function getAreaLst($areaId){
			mui.ajax({
				url : $http_prefix + "/api/sys/townList",
				headers: {
					"Authorization": $headers_authorization
				},
				type : "get",
				dataType : "json",
				timeout : 1000,
				data : {
					districtId : $areaId
				},
				success : function(dat){
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							var $area = document.getElementById("selArea");
							$area.options.length = 0;
							$area.options.add(new Option("请选择乡/镇", "-1"));
							for(var i = 0; i < dat.result.length; i ++){
								$area.options.add(new Option(dat.result[i].name, dat.result[i].id));
							}
						}
					}
				}, error :function(err){
					
				}
			});
		}
		
		$("#selArea").change(function(eve){
			if(this.value > 0)
			//getAreaLst("", "", "", this.value);
			getVillageLst(this.value);
		});
		
		
		//获取村落
		function getVillageLst($villId){
			mui.ajax({
				url : $http_prefix + "/api/sys/villageList",
				headers: {
					"Authorization": $headers_authorization
				},
				type : "get",
				dataType : "json",
				timeout : 1000,
				data : {
					townId : $villId
				},
				success : function(dat){
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							var $village = document.getElementById("selVillage");
							$village.options.length = 0;
							$village.options.add(new Option("请选择村落", "-1"));
							for(var i = 0; i < dat.result.length; i ++){
								$village.options.add(new Option(dat.result[i].name, dat.result[i].id));
							}
						}
					}
				}, error :function(err){
					
				}
			});
		}
	
	
		//获取学校信息
		function getSchoolLst($lev, $na, $py, $co){
			mui.ajax({
				url : $http_prefix + "/api/school/schoolList",
				headers: {
					"Authorization": $headers_authorization
				},
				type : "get",
				dataType : "json",
				timeout : 1000,
				data : {
					level : $lev,
					name : $na,
					pinyin : $py,
					regionId : $co
				},
				success : function(dat){
					if(dat.code == 0){
						var $school = document.getElementById("selSchool");
						$school.options.length = 0;
						$school.options.add(new Option("选择所在学校", "-1"));
						for (var i = 0; i < dat.result.length; i ++) {
							var $sch = dat.result[i];
							$school.options.add(new Option($sch.schoolName, $sch.id));
						}
					}
				}, error : function(err){
					
				}
						
			});
		}
		
		//选择学校加载年级
		$("#selSchool").change(function(eve){
			if(this.value > 0)
			getGradeBySchId(this.value);
		});
		
		//根据学校id获取年级列表
		function getGradeBySchId($schId){
			mui.ajax({
				url : $http_prefix + "/api/school/schoolGradeList",
				headers: {
					"Authorization": $headers_authorization
				},
				type : "get",
				dataType : "json",
				timeout : 1000,
				data : {
					schoolId : $schId
				},
				success : function(dat){
					if(dat.code == 0){
						var $grade = document.getElementById("selGrade");
						$grade.options.length = 0;
						$grade.options.add(new Option("请选择班级", "-1"));
						for (var i = 0; i < dat.result.length; i ++) {
							var $sch = dat.result[i];
							$grade.options.add(new Option($sch.gradeName, $sch.grade));
						}
					} 
				}, error : function(err){
					
				}
						
			});
		}
		
		function getClassForId($schId, $grade){
			mui.ajax({
				url : $http_prefix + "/api/school/schoolClassList",
				headers: {
					"Authorization": $headers_authorization
				},
				type : "get",
				dataType : "json",
				timeout : 1000,
				data : {
					schoolId : $schId,
					grade : $grade
				},
				success : function(dat){
					if(dat.code == 0){
						var $bigGrade = document.getElementById("ipt_BabyBigClass");
						//var $twoGrade = document.getElementById("ipt_BabyTwoClass");
						//var $threeGrade = document.getElementById("ipt_BabyThreeClass");
						$bigGrade.options.length = 0;
						//$twoGrade.options.length = 0;
						//$threeGrade.options.length = 0;
						$bigGrade.options.add(new Option("请选择所在班级", "-2"));
						$bigGrade.options.add(new Option("没有班级手动填写", "-1"));
						for (var i = 0; i < dat.result.length; i ++) {
							var $sch = dat.result[i];
							$bigGrade.options.add(new Option($sch.className, $sch.id));
							
							//$twoGrade.options.add(new Option($sch.className, $sch.id));
							
							//$threeGrade.options.add(new Option($sch.className, $sch.id));
						}
					}
				}, error : function(err){
					
				}
						
			});
		}
		
	</script>
</html>
